<style>
    .define{
        background-color: #f6f6f6;
    }
    .container-fluid{
        padding: 0;
    }
    .define-nav{
        background-color: #FFF;
        padding: 0.39393939rem 0 0.39393939rem 0.848484rem;
    }
    .define-nav .pull-left{
        color: #666;
        display: inline-block;
        font-size: 0.54rem;
        margin-top:6px;
    }
    .define-nav .pull-right{
        margin-right: 0.909090rem;
    }
    #admin_search_people,
    #admin_add_people{
        width: 3.272727rem;
    }
    .define-nav-input{
        margin-top: 0.87878787rem;
        margin-left: 0.909090rem;
        background-color: #FFF;
        padding:  0.757575rem 0;
        margin-right: 0.909090rem;
    }
    .define-nav-input .pull-right{
        margin-right: 0.909090rem;
    }
    .define-nav-input .define-table-input:nth-child(1){
        padding-left: 0.60606060rem;
    }
    .define-nav-input .define-table-input:nth-child(3),
    .define-nav-input .define-table-input:nth-child(2){
        padding-left: 1.818181rem;
    }
    .define-nav-input span{
        font-size: 0.424242rem;
        display: inline-block;
        margin-top: 1px;
    }
    .define-nav-input input{
        margin: 0;
        padding: 0.1rem 0.2rem;
        width: 7.878787rem;
        height: 0.727272rem;
        line-height: normal;
        font-size: 0.424242rem;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        border-color: #E6E6E6;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }
    .define-nav-input input::-webkit-input-placeholder {
        font-size: 1px;
        line-height: 1;
    }
    .define-nav-input input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        font-size: 0.2rem;
        line-height: 2.2;
    }
    .define-nav-input input::-moz-placeholder { /* Mozilla Firefox 19+ */
        font-size: 0.2rem;
        line-height: 2.2;
    }
    .define-nav-input input:-ms-input-placeholder { /* Internet Explorer 10+ */
        font-size: 0.2rem;
        line-height: 2.2;
    }
    .define-table-input button{
        background-color: #F7F9FA;
        border: 1px solid #E6E6E6;
        color: #999;
        height: 1.03rem;
        line-height: 0.606060rem;
        padding-left: 0.303030rem;
        padding-right: 0.303030rem;
        font-size: 0.424242rem;
        border-radius: 3px;
    }
    .define-table-input button i{
        padding-left: 1.333333rem;
    }
    .define-table-input button:focus,
    .define-table-input button:active,
    .define-table-input button:hover{
        border: 1px solid #E6E6E6;
    }
    .define-table{
        margin-left: 0.9090909rem;
        margin-right: 0.9090909rem;
    }
    .table{
        border-radius: 3px;
        margin-bottom: 0;
        border: 1px solid #E6E6E6;
        font-size: 0.424242rem;
    }
    .table thead{
        background-color: #FAFAFA;
        color: #999;
    }
    .table tr{
        padding-left: 0.606060rem;
    }
    .table td{
        border-top: 1px solid #E6E6E6;
        border-bottom: 1px solid #E6E6E6;
        padding: 0.51515151rem 0.242424rem;
        line-height: 1;
    }
    .table tbody{
        background-color: #FFF;
    }
    .table tbody td{
        vertical-align: bottom;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
    .table-hover tbody tr:hover td{
        background-color: #fafafa;
    }
    .table tbody td:nth-child(4) img{
        width: 1.212121rem;
        vertical-align: -1px;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
    }
    td.clearfix img{
        width: 0.393939rem;
        vertical-align: -2px;
        margin-right: 5px;
    }
    td.clearfix div:nth-child(2),
    td.clearfix div:nth-child(3){
        margin-left: 0.606060rem;
    }
    /*td.clearfix div{
        background-color: #E6E6E6;
        padding: 3px 5px;
    }*/
    .define-paging{
        margin-top: 0.6363rem;
        display: block;
        color: #999;
        font-size: 0.363636rem;
        text-align: center;
    }
    /*改变鼠标悬浮样式  ↓*/
    .define-paging .pull-left:not(:first-child){
        cursor: pointer;
    }
    /*改变鼠标悬浮样式  ↑*/
    .define-paging .pull-left{
        padding: 0 0.272727rem;
    }
    .define-page.define-active{
        color: #47489A;
    }
    .define-paging .pull-left:first-child{
        margin-left: 38%;
        letter-spacing: 0.2rem;
    }
    /*选择科室*/
    .dropdown-menu{
        font-size: 0.42424242rem;
        text-align: center;
        left: 27%;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        min-width: 72%;
        padding: 0;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
    }
    .dropdown-menu li{
        line-height: 1;
        padding: 5px 0;
    }
    .dropdown-menu li:hover{
        background-color: #E6E6E6;
    }

    /*弹层样式*/
    .modal{
        margin: 0;
        width: 43%;
        min-width: 605px;
        left: 30%;

    }
    .modal.fade.in{
        top: 26%;
    }
    .modal-backdrop, .modal-backdrop.fade.in{
        opacity: 0.5;
    }
    .modal-header{
        background-color: #fafafa;
        color: #1CC7BD;
        font-size: 12px;
        padding: 0.3484848rem 0.636363rem;
    }
    .modal-header img{
        position: absolute;
        top:8%;
        right: 0.636363rem;
    }
    .modal-header img:hover{
        -webkit-animation: img_hover_rotate .2s linear;
        -o-animation: img_hover_rotate .2s linear;
        animation: img_hover_rotate .2s linear;
    }
    .modal .modal-body{
        font-size: 12px;
        padding: 2.4em;
    }
    @-webkit-keyframes img_hover_rotate {
        0%{  -webkit-transform: rotate(0deg);  }
        100%{  -webkit-transform: rotate(90deg);  }
    }
    @-o-keyframes img_hover_rotate {
        0%{  -o-transform: rotate(0deg);  }
        100% {  -o-transform: rotate(90deg);  }
    }
    @-ms-keyframes img_hover_rotate {
        0%{  -ms-transform: rotate(0deg);  }
        100%{  -ms-transform: rotate(90deg);  }
    }
    @-moz-keyframes img_hover_rotate {
        0%{  -moz-transform: rotate(0deg);  }
        100%{  -moz-transform: rotate(90deg);  }
    }
    @-khtml-keyframes img_hover_rotate {
        0%{  -khtml-transform: rotate(0deg);  }
        100%{  -khtml-transform: rotate(90deg);  }
    }
    @keyframes  img_hover_rotate{
        0%{  transform: rotate(0deg);  }
        100%{  transform: rotate(90deg);  }
    }
    /*添加*/
    .modal .modal-body input{
        margin: 0 0 0 5px;
        width: 94%;
        border: 1px solid #e6e6e6;
        -webkit-box-shadow: none;
        box-shadow: none;
        border-radius: 3px;
        height: 0.78787878rem;
        line-height: 0.78787878rem;
    }
    .modal .modal-body input[disabled]{
        background-color: #FFF;
    }
    .modal .modal-body input[disabled]:hover{
        cursor: auto;
    }
    .modal .modal-body input:-moz-placeholder{
        color: #C9C8C8;
        font-size: 12px;
    }
    .modal .modal-body input:-ms-input-placeholder{
        color: #C9C8C8;
        font-size: 12px;
    }
    .modal .modal-body input::-webkit-input-placeholder {
        color: #C9C8C8;
        font-size: 12px;
    }
    .modal .modal-body input:focus{
        border-color: rgba(82, 168, 236, 0.8);
        outline: 0;
        outline: thin dotted \9;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
        -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
    }
    .modal .modal-body > div{
        width: 50%;
    }
    .modal .modal-body > div.clearfix{
        width: 100%;
    }
    .modal .modal-body table{
        width: 99%;
        border: none;
    }
    .modal .modal-body table td{
        padding-bottom: 0.575757rem;
    }
    .modal .modal-body > div tr td:nth-child(1) img{
        vertical-align: text-top;
    }
    .modal .modal-body > div.pull-left tr td:nth-child(1){
        width: 69px;
        text-align: right;
    }
    .modal .modal-body > div.pull-right tr td:nth-child(1){
        width: 69px;
        text-align: right;
    }
    .modal .modal-body > div.pull-right table{
        margin-left: 1%;
    }
    #select_sex_img{
        position: absolute;
        top: 24.5%;
        right: 4.5%;
    }
    #modal_resever,#modal_sure{
        background-color: #1CC7BD;
        color: #FFF;
        width: 23.5%;
        text-align: center;
        padding: 0.166666rem;
        border-radius: 2px;
        margin-top: 1em;
    }
    #modal_resever:hover,#modal_sure:hover{
        cursor: pointer;
        background-color: #18ADA4;
    }

    /*选择性别  下拉选择框*/
    .modal .modal-body input.active{
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
    #modal_select_sex{
        display: none;
        position: absolute;
        left: 6px;
        background-color: #FFF;
        border-bottom: 1px solid #e6e6e6;
        border-left: 1px solid #e6e6e6;
        border-right: 1px solid #e6e6e6;
        border-bottom-left-radius: 3px;
        border-bottom-right-radius: 3px;
    }
    #modal_select_sex div{
        padding: 0.24242424rem 6px;
    }
    #modal_select_sex div.active{
        background-color: #e6e6e6;
    }
    #modal_select_sex div:hover{
        background-color: #F3F3F3;
    }
    .modal-body div.clearfix .pull-left:first-child{
        width: 71px;
        text-align: right;
        margin-top: 2.2%;
    }
    .modal-body div.clearfix .pull-left:nth-child(2){
        margin-left: 5px;
    }
    .modal-body div.clearfix .pull-left:nth-child(2) img{
        width: 2.39393939rem;
        height: 2.39393939rem;
    }
    .modal-body div.clearfix .pull-left:nth-child(3){
        margin-left: 0.57575757rem;
    }
    .modal-body div.clearfix .pull-left:nth-child(3) > div:nth-child(1){
        margin-top: 4%;
    }
    .modal-body div.clearfix .pull-left:nth-child(3) > div:nth-child(2){
        margin-top: 4%;
    }
    #select_select_img{
        border: 1px solid #e6e6e6;
        text-align: center;
        width: 36.5%;
        padding: 0.1666666rem 0;
        border-radius: 2px;
        cursor: pointer;
    }
    .modal_btn{
        display: table;
        width: 100%;
        margin-top: 1em;
    }
    .modal_btn>div{
        display: table-cell;
        width: 50%;
    }
    #modal_resever{
        margin-left: 74%;
    }
    #modal_sure{
        margin-left: 5%;
    }

    /*请填写完整信息弹层  删除信息弹层*/
    #department_modal_tip.modal .modal-body > div{
        width: 100%;
    }
    #department_modal_tip{
        width: 15%;
        min-width: 220px;
        z-index: 1051;
    }
    #department_modal_tip .modal-body{
        text-align: center;
    }
    #department_modal_tip .modal-header{
        background-color: #FFF;
    }
    #department_modal_tip .modal-body div:nth-child(1){
        margin-top: 1em;
    }
    #department_modal_tip .modal-body div:nth-child(2){
        background-color: #1CC7BD;
        color: #FFF;
        margin: 2em auto 0 auto;
        width: 30%;
        padding: 0.1666666rem 0;
        border-radius: 3px;
    }
    #department_modal_tip .modal-body div:nth-child(2):hover{
        background-color: #18ADA4;
        cursor: pointer;
    }


    /*适配*/
    @media (min-width: 1024px){
        /*18*/
        .define-nav .pull-left{
            font-size: 15px;
            margin-top: 3px;
        }
        .define-table-input button{
            line-height: 1.33;
        }
        td.clearfix img{
            width: 0.55rem;
            vertical-align: -1px;
        }
        td.clearfix div:nth-child(3) img{
            width: 0.6rem;
        }
        .table tbody td:nth-child(4) img{
            vertical-align: 0;
        }
        .define-nav-input input{
            line-height: normal;
            font-size: 0.424242rem;
        }
        .modal-header img{
            top: 3.8%
        }
        #select_sex_img{
            top: 26.8%;
            right: 5%;
        }
        .modal-body div.clearfix .pull-left:first-child{
            margin-top: 2.2%;
        }
        .modal-body div.clearfix .pull-left:nth-child(3) > div:nth-child(1){
            margin-top: 0;
        }
        .modal-body div.clearfix .pull-left:nth-child(3) > div:nth-child(2){
            margin-top: 0;
        }
        #department_modal_tip .modal-header img{
            top: 5.8%
        }
        .define-nav-input span{
            margin-top: -1px;
        }
    }
    @media (min-width: 1100px) {
        /*20*/
        .define-table-input button{
            line-height: 1.45;
        }
        td.clearfix img{
            vertical-align: -2px;
        }
        #select_sex_img{
            top: 26.5%;
        }
        .modal-body div.clearfix .pull-left:first-child{
            margin-top: 2.3%;
        }
        .modal-body div.clearfix .pull-left:nth-child(3) > div:nth-child(1){
            margin-top: 0.5%;
        }
        .modal-body div.clearfix .pull-left:nth-child(3) > div:nth-child(2){
            margin-top: 0.5%;
        }
        .define-nav-input span{
            margin-top: 0;
        }
    }
    @media (min-width: 1280px) {
        /*22*/
        .define-nav .pull-left{
            font-size: 17px;
            margin-top: 3px;
        }
        .define-table-input button{
            line-height: 1.7;
        }
        td.clearfix img{
            width: 0.5rem;
        }
        #select_sex_img{
            top: 25.8%;
        }
        .modal-body div.clearfix .pull-left:first-child{
            margin-top: 3%;
        }
        .modal-body div.clearfix .pull-left:nth-child(3) > div:nth-child(1){
            margin-top: 1%;
        }
        .modal-body div.clearfix .pull-left:nth-child(3) > div:nth-child(2){
            margin-top: 1%;
        }
        #department_modal_tip .modal-header img{
            top: 6.8%
        }
        .define-nav-input span{
            margin-top: 2px;
        }
    }
    @media (min-width: 1366px) {
        /*24*/
        .define-nav .pull-left{
            font-size: 17px;
            margin-top: 3px;
        }
        .define-table-input button{
            line-height: 1.9;
        }
        td.clearfix img{
            width: 0.45rem;
            vertical-align: -1px;
        }
        td.clearfix div:nth-child(3) img{
            width: 0.5rem;
        }
        .modal-body div.clearfix .pull-left:first-child{
            margin-top: 3.5%;
        }
        .modal-body div.clearfix .pull-left:nth-child(3) > div:nth-child(1){
            margin-top: 1.5%;
        }
        .modal-body div.clearfix .pull-left:nth-child(3) > div:nth-child(2){
            margin-top: 1.5%;
        }
        .define-nav-input span{
            margin-top: 3px;
        }
    }
    @media (min-width: 1440px) {
        /*25*/
        .define-nav .pull-left{
            margin-top: 4px;
        }
        .define-table-input button{
            line-height: 1.95;
        }
        td.clearfix div:nth-child(3) img{
            width: 0.45rem;
        }
        .modal-header img{
            top: 4%
        }
        #select_sex_img{
            top: 25.3%;
        }
        .modal-body div.clearfix .pull-left:first-child{
            margin-top: 3.5%;
        }
        .modal-body div.clearfix .pull-left:nth-child(3) > div:nth-child(1){
            margin-top: 2%;
        }
        .modal-body div.clearfix .pull-left:nth-child(3) > div:nth-child(2){
            margin-top: 2%;
        }
    }
    @media (min-width: 1680px) {
        /*28*/
        .define-nav .pull-left{
            font-size: 18px;
            margin-top: 5px;
        }
        .define-table-input button{
            line-height: 2.2;
        }
        td.clearfix img{
            width: 0.36rem;
            vertical-align: -1px;
        }
        td.clearfix div:nth-child(3) img{
            width: 0.4rem;
        }
        .table tbody td:nth-child(4) img{
            vertical-align: -1px;
        }
        .modal-header img{
            top: 4.1%
        }
        #select_sex_img{
            top: 24.6%;
        }
        .modal-body div.clearfix .pull-left:first-child{
            margin-top: 3.4%;
        }
        .modal-body div.clearfix .pull-left:nth-child(3) > div:nth-child(1){
            margin-top: 2.8%;
        }
        .modal-body div.clearfix .pull-left:nth-child(3) > div:nth-child(2){
            margin-top: 2.8%;
        }
        #department_modal_tip .modal-header img{
            top: 7.8%
        }
        .define-nav-input span{
            margin-top: 5px;
        }
    }
    @media (min-width: 1920px) {
        /*33*/
        .define-nav .pull-left{
            font-size: 0.54rem;
            margin-top: 6px;
        }
        .modal-body div.clearfix .pull-left:first-child{
            margin-top: 4%;
        }
        .modal-body div.clearfix .pull-left:nth-child(3) > div:nth-child(1){
            margin-top: 4%;
        }
        .modal-body div.clearfix .pull-left:nth-child(3) > div:nth-child(2){
            margin-top: 4%;
        }
        .define-nav-input span{
            margin-top: 6px;
        }
    }

</style>

<div class="define">
    <div class="define-nav clearfix">
        <div class="pull-left">腕带管理</div>
        <div class="pull-right"><img id="admin_add_people" src="/statics/images/sever_add.png" alt=""></div>
    </div>

    <div class="define-nav-input clearfix">
        <form action="" method="post" id="search_form">
        <div class="define-table-input pull-left clearfix">
            <span class="pull-left">腕带设备号：</span>
            <input class="pull-left" name="wristlet_num" type="text" placeholder="请输入腕带设备号">
        </div>
        <div class="define-table-input pull-left clearfix">
            <span class="pull-left">姓名：</span>
            <input class="pull-left" name="name" type="text" placeholder="请输入姓名">
        </div>
        </form>

        <div class="define-table-input pull-right">
            <img id="admin_search_people" src="/statics/images/sever_search.png" alt="">
        </div>
    </div>

    <div style="margin-left: 0.90rem;font-size: 0.424242rem;margin-top: 0.545454rem;margin-bottom: 0.545454rem;">全部结果</div>

    <div class="define-table">
        <table class="table table-hover">
            <thead>
            <tr>
                <td>序号</td>
                <td>腕带设备号</td>
                <td>版本号</td>
                <td>姓名</td>
                <td>手机号</td>
                <td>绑定时间</td>
                <td>解绑时间</td>
                <td>状态</td>
                <td>住院号</td>
                <td>门诊号</td>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>1</td>
                <td>0000018</td>
                <td>PC0000018</td>
                <td>张三</td>
                <td>13556568899</td>
                <td>2017-10-31</td>
                <td>2017-11-15</td>
                <td>已解绑</td>
                <td>A888</td>
                <td>A666</td>
            </tr>
            <tr>
                <td>2</td>
                <td>0000017</td>
                <td>PC0000017</td>
                <td>李四</td>
                <td>13556568899</td>
                <td>2017-10-15</td>
                <td>2017-12-15</td>
                <td>已解绑</td>
                <td>A888</td>
                <td>A666</td>
            </tr>
            <tr>
                <td>3</td>
                <td>0000016</td>
                <td>PC0000016</td>
                <td>王五</td>
                <td>13556568899</td>
                <td>2017-11-15</td>
                <td>--</td>
                <td>未解绑</td>
                <td>A888</td>
                <td>A666</td>
            </tr>
            <tr>
                <td>4</td>
                <td>0000015</td>
                <td>PC0000015</td>
                <td>马六</td>
                <td>13556568899</td>
                <td>--</td>
                <td>--</td>
                <td>暂未使用</td>
                <td>A888</td>
                <td>A666</td>
            </tr>
            <tr>
                <td>5</td>
                <td>0000014</td>
                <td>PC0000014</td>
                <td>赵七</td>
                <td>13556568899</td>
                <td>--</td>
                <td>--</td>
                <td>暂未使用</td>
                <td>A888</td>
                <td>A666</td>
            </tr>
            <tr>
                <td>6</td>
                <td>0000018</td>
                <td>PC0000018</td>
                <td>张三</td>
                <td>13556568899</td>
                <td>2017-10-31</td>
                <td>2017-11-15</td>
                <td>已解绑</td>
                <td>A888</td>
                <td>A666</td>
            </tr>
            <tr>
                <td>7</td>
                <td>0000017</td>
                <td>PC0000017</td>
                <td>李四</td>
                <td>13556568899</td>
                <td>2017-10-15</td>
                <td>2017-12-15</td>
                <td>已解绑</td>
                <td>A888</td>
                <td>A666</td>
            </tr>
            <tr>
                <td>8</td>
                <td>0000016</td>
                <td>PC0000016</td>
                <td>王五</td>
                <td>13556568899</td>
                <td>2017-11-15</td>
                <td>--</td>
                <td>未解绑</td>
                <td>A888</td>
                <td>A666</td>
            </tr>
            <tr>
                <td>9</td>
                <td>0000015</td>
                <td>PC0000015</td>
                <td>马六</td>
                <td>13556568899</td>
                <td>--</td>
                <td>--</td>
                <td>暂未使用</td>
                <td>A888</td>
                <td>A666</td>
            </tr>
            <tr>
                <td>10</td>
                <td>0000014</td>
                <td>PC0000014</td>
                <td>赵七</td>
                <td>13556568899</td>
                <td>--</td>
                <td>--</td>
                <td>暂未使用</td>
                <td>A888</td>
                <td>A666</td>
            </tr>
            </tbody>
        </table>
    </div>

    <!--分页  开始-->
    <div class="define-paging clearfix">
        <div class="pull-left">共8页</div>
        <div class="pull-left" id="the_first_page">首页</div>
        <div class="pull-left" id="prev_page">上一页</div>
        <div class="pull-left define-page define-active">1</div>
        <div class="pull-left define-page">2</div>
        <div class="pull-left define-page">3</div>
        <div class="pull-left define-page">4</div>
        <div class="pull-left define-page">5</div>
        <div class="pull-left" id="next_page">下一页</div>
        <div class="pull-left" id="the_last_page">尾页</div>
    </div>
    <!--分页  结束-->
</div>

<!--添加绑定弹层  开始-->
<div class="modal fade" tabindex="-1" role="dialog" id="add_user_modal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <span class="define-modal-close" data-dismiss="modal" aria-label="Close"><img src="/statics/images/sever_close.png" alt=""></span>
                <div class="modal-title">添加绑定</div>
            </div>
            <!--默认  医生-->
            <div class="modal-body clearfix">
                <div class="pull-left">
                    <table>
                        <tr>
                            <td><img src="/statics/images/sever_must_write.png" alt="">腕带设备号:</td>
                            <td><input type="text" placeholder="请输入腕带设备号"></td>
                        </tr>
                        <tr>
                            <td><img src="/statics/images/sever_must_write.png" alt="">姓名:</td>
                            <td><input type="text" placeholder="请输入姓名"></td>
                        </tr>
                    </table>
                </div>
                <div class="pull-right">
                    <table>
                        <tr>
                            <td><img src="/statics/images/sever_must_write.png" alt="">版本号:</td>
                            <td style="position: relative;">
                                <input type="text" placeholder="请输入版本号">
                            </td>
                        </tr>
                        <tr>
                            <td><img src="/statics/images/sever_must_write.png" alt="">手机号:</td>
                            <td><input type="text" placeholder="请输入手机号"></td>
                        </tr>
                    </table>
                </div>
                <div class="clearfix">
                    <div class="pull-left">二维码:</div>
                    <div class="pull-left"><img id="select_select_img_show" src="/statics/images/sever_defaultimg_parameter.png" alt=""></div>
                    <div class="pull-left">
                        <div>
                            <div id="select_select_img">选择图片</div>
                            <form id="select_select_img_form" style="display: none;">
                                <input type="file" id="select_select_img_input">
                            </form>
                        </div>
                        <div style="color: #C9C8C8;">支持PNG,JPG等图片格式。大小不超过2M。</div>
                    </div>
                </div>
                <div class="modal_btn" style="width: 100%;">
                    <div><div id="modal_resever">重置</div></div>
                    <div><div id="modal_sure">确认添加</div></div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--添加绑定弹层  结束-->

<!--信息填写提示  开始-->
<div class="modal fade" tabindex="-1" role="dialog" id="department_modal_tip">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <span class="define-modal-close" data-dismiss="modal" aria-label="Close"><img src="/statics/images/sever_close.png" alt=""></span>
                <div class="modal-title">信息</div>
            </div>
            <div class="modal-body">
                <div>请填写完成必填信息！</div>
                <div data-dismiss="modal" aria-label="Close">确定</div>
            </div>
        </div>
    </div>
</div>
<!--信息填写提示  结束-->

<!--添加绑定form表单  开始-->
<form action="" method="post" id="add_user_form" style="display: none;">
    <input type="text" name="wristlet_num"><!--腕带设备号-->
    <input type="text" name="edition_num"><!--版本号-->
    <input type="text" name="name"><!--姓名-->
    <input type="text" name="phone_num"><!--手机号-->
    <input type="text" name="QR_code"><!--二维码-->
</form>
<!--添加绑定form表单  结束-->


<script>
    $(document).ready(function () {
        //屏幕长度变化检测
        $(window).resize(function () {
            amend_modal_place( $('#add_user_modal') );//弹层 修正弹窗位置  始终处于屏幕中央
        });

        //设置当前页面选中样式
        setting_style_the_page();
        function setting_style_the_page() {
            var first_menu_item = $('#sidebar-nav').find('a[href="#accounts-menu-first-01"]');//获取一级菜单可点击的a标签
            var img_nav = first_menu_item.find('.define-nav');//获取导航图片
            var img_left = first_menu_item.find('.define-left');//获取转向图片
            var first_ul = $('#accounts-menu-first-01');//获取一级下拉菜单
            var first_ul_li_one = first_ul.children('li').eq(2);//获取  "患者管理"

            var second_menu_item = $('#sidebar-nav').find('a[href="#accounts-menu-second-03"]');//获取二级菜单可点击的a标签
            var second_img_left = second_menu_item.parent().find('.define-left');//获取转向图片
            var second_ul = $('#accounts-menu-second-03');//获取二级下拉菜单
            var second_ul_li_one = second_ul.children('li').eq(1);//获取  "腕带管理"

            first_menu_item.addClass('define-active');//一级菜单添加左边横线
            img_nav.attr('src','/statics/images/sever_hospital_select.png');//切换导航图片
            img_left.addClass('define-rotate-active');//添加动画类
            first_ul.addClass('in');//展拉一级菜单
            first_ul_li_one.addClass('define-active');//li添加左边横线

            second_ul.addClass('in');//展开二级菜单
            second_img_left.addClass('define-rotate-active');//添加动画类
            second_ul_li_one.addClass('define-active');//"腕带管理"  添加选中样式
        }

        //分页切换效果
	    page_style_switch();
	    function page_style_switch() {
		    var page_ = $('.define-paging');
		    var the_first_page = $('#the_first_page');//获取首页
		    var prev_page = $('#prev_page');//获取上一页
		    var next_page = $('#next_page');//获取下一页
		    var the_last_page = $('#the_last_page');//获取尾页

		    // 123456
		    page_.delegate('.define-page','click',function () {
			    page_.find('.define-page').removeClass('define-active');
			    $(this).addClass('define-active');
		    });

		    // 上一页
		    prev_page.on('click',function () {
			    var active_page = page_.find('.define-active');
			    if(active_page.text() > 1){
				    page_.find('.define-page').removeClass('define-active');
				    active_page.prev().addClass('define-active')
			    }
		    });

		    // 下一页
		    next_page.on('click',function () {
			    var active_page = page_.find('.define-active');
			    if(active_page.text() < 5){
				    page_.find('.define-page').removeClass('define-active');
				    active_page.next().addClass('define-active')
			    }
		    });

		    // 首页
		    the_first_page.on('click',function () {
			    page_.find('.define-page').removeClass('define-active');
			    page_.find('.define-page').eq(0).addClass('define-active');
		    });

		    // 尾页
		    the_last_page.on('click',function () {
			    page_.find('.define-page').removeClass('define-active');
			    page_.find('.define-page').eq(4).addClass('define-active');
		    });

	    }

        /*页面*/
        //搜索功能
        search_function();
        function search_function() {
            $('#admin_search_people').on('click',function () {
                $('#search_form').submit();
            });
        }

        /*弹层*/
        //点击添加  弹出弹层
        show_modal_btn_add();
        function show_modal_btn_add() {
            $('#admin_add_people').on('click',function () {
                amend_modal_place( $('#add_user_modal') );//弹层 修正弹窗位置  始终处于屏幕中央
                $('#add_user_modal').modal({keyboard:false});//弹出弹层
            });
        }

        //弹层 修正弹窗位置  始终处于屏幕中央
        function amend_modal_place($modal) {
            var window_width = $(window).width();
            var window_height = $(window).height();
            var width = $modal.width();
            var height = $modal.height();

            var left = ( window_width - width ) / 2;
            var top  = ( window_height - height ) / 2;

            $modal.css('left',left);
            $modal.css('top',top);
        }

        //弹层  点击选择图片
        modal_click_select_img();
        function modal_click_select_img() {
            $('#select_select_img').on('click',function () {
                local_input_click( $('#select_select_img_input') );//弹层  选择图片  返回文件按钮点击
                previewImg( $('#select_select_img_input') , $('#select_select_img_show') );//弹层  选定需要上传的文件之后  展示在窗口  预览即将上传的图片
            });
        }

        //弹层  选择图片  返回文件按钮点击
        function local_input_click($input) {
            return $input.click();
        }

        //弹层  选定需要上传的文件之后  展示在窗口  预览即将上传的图片
        function previewImg($input,$img) {
            $input.change(function () {
                var objUrl = getObjectURL(this.files[0]) ;//获取文件url
                //如果不是img文件 ，提示不能选择此类文件
                if (this.files[0].type !== 'image/jpeg' && this.files[0].type !== 'image/png' && this.files[0].type !== 'image/gif') {
                    alert('不是有效的图片文件!');
                    $img.attr('src', '/statics/images/addpic.png');//赋值控制给img
                    return;
                }
                //获取到url 赋值img的url  并展示
                if (objUrl) {
                    $img.attr('src', objUrl);//赋值控制给img
                    mdal_sure_add_function_img($(this));//弹层  确认添加功能 图像处理
                }
            });
        }

        //弹层  获取文件的url
        function getObjectURL(file) {
            var url = null ;
            if (window.createObjectURL != undefined) {
                url = window.createObjectURL(file) ;// basic
            }
            else if (window.URL != undefined) {
                url = window.URL.createObjectURL(file) ;// mozilla(firefox)
            }
            else if (window.webkitURL != undefined) {
                url = window.webkitURL.createObjectURL(file) ;// webkit or chrome
            }
            return url ;
        }

        //弹层  必填字段填写提示
        modal_verify_must_write_tip();
        function modal_verify_must_write_tip() {
            var input = $('#add_user_modal').find('input');
            $('#modal_sure').on('click',function () {
                if( input.eq(0).val() == '' || input.eq(1).val() == '' || input.eq(2).val() == '' || input.eq(3).val() == '' ){
                    modal_verify_must_write();//弹层  必填字段验证  及  信息提示
                }
            });
        }

        //弹层  必填字段验证  及  信息提示
        function modal_verify_must_write() {
            var input = $('#add_user_modal').find('input');
            if(input.eq(0).val() == '' || input.eq(1).val() == '' || input.eq(2).val() == '' || input.eq(3).val() == '' ){
                amend_modal_place( $('#department_modal_tip'));//修正弹窗位置
                $('#department_modal_tip').modal({keyboard:false});//弹出弹层
                $('body').children('.modal-backdrop:last-child').css('zIndex','1050');//修改弹层层级
            }else {
                mdal_sure_add_function();//弹层  确认添加功能  form表单赋值
            }
        }
        
        //弹层  重置功能
        mdal_reset_function();
        function mdal_reset_function() {
            var input = $('#add_user_modal').find('input');
            $('#modal_resever').on('click',function () {
                input.eq(0).val('');
                input.eq(1).val('');
                input.eq(2).val('');
                input.eq(3).val('');
            });
        }

        //弹层  确认添加功能  form表单赋值
        function mdal_sure_add_function() {
            var form = $('#add_user_form');//form表单
            var input = $('#add_user_modal').find('input');

            form.find('input[name="wristlet_num"]').val( input.eq(0).val() );/*腕带设备号*/
            form.find('input[name="edition_num"]').val( input.eq(2).val() );/*版本号*/
            form.find('input[name="name"]').val( input.eq(1).val() );/*姓名*/
            form.find('input[name="phone_num"]').val( input.eq(3).val() );/*手机号*/

            mdal_sure_add_function_ajax( form.serialize() );//弹层  确认添加功能 ajax
        }

        //弹层  确认添加功能 图像处理
        function mdal_sure_add_function_img($input) {
            var form = $('#add_user_form');//form表单
            var formData = new FormData();
            formData.append('file',$input[0].files[0]);

            form.find('input[name="QR_code"]').val( formData );/*二维码*/
        }

        //弹层  确认添加功能 ajax
        function mdal_sure_add_function_ajax(data) {
            $.ajax({
                url: '',
                type: 'POST',
                dataType: 'json',
                data: data,
                success:function(data){
                    console.log(data);
                },
                error: function (err) {
                    console.log(err);
                }
            })
        }

    });
</script>